<template>
  <div class="head">
    <!-- 导航栏 -->
    <router-link to="/">
      <van-nav-bar left-text="" left-arrow />
    </router-link>
    <!-- <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"> -->
    <font class="head_title">
      <span>恰饭</span>
      <v-icon name="gi-hot-meal" full="#f2c511" :scale="2"></v-icon>
    </font>
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="登录">
          <van-form @submit="onSubmit">
            <van-field label="账号" v-model="form.username" placeholder="请输入账号" :rules="[{ required: true, message: '请输入正确的账号' }]" />
            <van-field label="密码" v-model="form.password" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="form.code" center clearable label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
              <template #button>
                <img @click="getCaptcha" style="height: 34px; width: 100px" :src="form.base64" alt="" />
              </template>
            </van-field>
            <!-- TODO:生成图片验证码 -->
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="注册">
          <van-form @submit="onSubmit">
            <van-field label="账号" v-model="form.username" placeholder="请输入账号" :rules="[{ required: true, message: '请输入正确的账号' }]" />
            <van-field label="密码" v-model="form.password" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field
              label="确认密码"
              v-model="form.passwordAgain"
              type="password"
              placeholder="请输入确认密码"
              :rules="[
                { required: true, message: '请填写确认密码' },
                { validator, message: '两次输入的密码不一致' },
              ]"
            />
            <van-field v-model="form.code" center clearable label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
              <template #button>
                <img @click="getCaptcha" style="height: 34px; width: 100px" :src="form.base64" alt="" />
              </template>
            </van-field>
            <!-- TODO:生成图片验证码 -->
            <div style="margin: 16px">
              <van-button color="btn" round block type="info" native-type="submit">
                注册
              </van-button>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
//导入登录的js文件
import login from '@/api/login';
export default {
  data() {
    return {
      form: {
        isAdmin: 0,
        username: '15173067340',
        password: '20020123feng',
        passwordAgain: '',
        code: '',
        key: '',
        base64: '',
      },
      active: 0,
    };
  },
  mounted() {
    this.getCaptcha();
    console.log(this.$route.query);
    window.sessionStorage.setItem('tableId', this.$route.query.tableId);
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    async getCaptcha() {
      const { data } = await this.req.get('/auth/captcha');
      this.form.base64 = data.captchaImg;
      console.log(data);
      this.form.key = data.key;
    },
    async onSubmit() {
      const arr = [
        {
          url: '/auth/login',
          message: '登录成功',
        },
        {
          url: '/auth/register',
          message: '注册成功',
        },
      ];
      let obj = {};
      if (this.active == 0) {
        obj = arr[0];
      } else {
        obj = arr[1];
      }
      const { data, status, msg } = await this.req.post(obj.url, this.form);
      if (status === 200) {
        this.$notify({
          type: 'success',
          message: `${obj.message}`,
        });
        if (this.active == 0) {
          console.log(data);
          window.sessionStorage.setItem('token', data.token);
          this.$router.push('/search');
          console.log(1);
        } else {
          this.active = 0;
          this.form.code = '';
        }
        this.getCaptcha();
      } else {
        this.$notify({
          type: 'danger',
          message: msg,
        });
        this.getCaptcha();
      }
    },
    validator(value) {
      if (value !== this.form.password) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
body {
  background-color: #ffffff;
}
.head {
  text-align: center;
}
.head .van-nav-bar {
  margin-bottom: 100px;
}
.head .head_title {
  font-size: 40px;
  font-weight: bold;
  color: #f2c511;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-right: 20px;
  }
}
.van-tabs {
  margin-top: 20px;
}
.van-tabs__wrap {
  width: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.van-tabs__content {
  width: 300px;

  margin: 0 auto;
}
.block {
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.content-text {
  color: gray;
  font-size: 10px;
}
.btn {
  background-color: #f2c511;
}
</style>
